<template>
	<div v-cloak class="aui-wrapper aui-page__iframe">
		<div class="aui-content__wrapper">
			<div class="aui-content">
				<el-card shadow="never" class="aui-card--fill">
					<div class="mod-lswms__inventory">
						<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
							<el-row>
								<el-col :span="2">
									<el-form-item>
										<el-input v-model="dataForm.sku" size="small" placeholder="物料编码" clearable>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="2">
									<el-form-item>
										<el-input v-model="dataForm.descr" size="small" placeholder="物料名称" clearable></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="2">
									<el-form-item v-show="false">
										<el-input v-model="dataForm.sort" size="small" placeholder="类别" clearable></el-input>
									</el-form-item>
									<el-form-item>
										<el-cascader v-model="sortvalue" :options="skucategoryList" size="small" placeholder="类别"
											:props="{ value: 'categorykey' ,label:'name' }" :show-all-levels="false"
											@change="handleChange" clearable>
										</el-cascader>
									</el-form-item>
								</el-col>
								<el-col :span="2">
									<el-form-item>
										<el-input v-model="dataForm.factorycdoe" size="small" placeholder="计量编码/工装号" clearable>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="2">
									<el-form-item>
										<el-input v-model="dataForm.location" size="small" placeholder="库位编码" clearable>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="2">
									<el-form-item>
										<el-input v-model="dataForm.tray" size="small" placeholder="箱" clearable>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="2">
									<el-form-item>
										<el-select v-model="dataForm.box" size="small" placeholder="请选择格">
											 <el-option  value="" label="--"> </el-option>
											<el-option v-for="item in boxs" :key="item.list" :label="item.listname" :value="item.list">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="2">
									<el-form-item>
										<el-input v-model="dataForm.lot" size="small" placeholder="批号" clearable>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="2">
									<el-form-item>
										<el-input v-model="dataForm.qty" size="small" placeholder="数量" clearable>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="2">
									<el-form-item>
										<el-input v-model="dataForm.pickqty" size="small" placeholder="分配量" clearable>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="2">
									<el-form-item>
										<el-input v-model="dataForm.putqty" size="small" placeholder="待上架量" clearable>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="2">
									<el-form-item>
										<el-input v-model="dataForm.status" size="small" placeholder="状态" clearable>
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="2">
									<el-form-item>
										<el-input v-model="dataForm.lot7" size="small" placeholder="主制车间" clearable>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="2">
									<el-form-item>
										<el-input v-model="dataForm.lot6" size="small" placeholder="计划单号/工序号" clearable>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="2">
									<el-form-item>
										<el-button size="small" @click="getDataList()">查询</el-button>
									</el-form-item>
								</el-col>
								<el-col :span="2">
									<el-form-item>
										<el-button type="info" size="small" @click="exportHandle()">导出</el-button>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
						<el-table v-loading="dataListLoading" :data="dataList" border
							@selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle"
							style="width: 100%;" >
							<el-table-column prop="sku" label="物料编码" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="descr" label="物料名称" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="factorycdoe" label="计量编码/工装号" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="location" label="库位编码" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="tray" label="箱" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="boxstr" label="格" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lot" label="批号" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="qty" label="数量" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="pickqty" label="分配量" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="putqty" label="待上架量" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lot1" label="生产日期" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lot2" label="有效日期" header-align="center" align="center">
							</el-table-column>
							 <el-table-column prop="lot3str" label="是否加长" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lot4" label="价格" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lot5" label="部门/供应商" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lot6" label="计划单号/工序号" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lot7" label="主制车间" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lot8" label="任务编码" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lot9str" label="新旧" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lot10str" label="作废" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lot11" label="炉批号" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lot12" label="材料复验号" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lot13" label="牌号" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lot14" label="属性14" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lot15" label="属性15" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="status" label="状态" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="remark" label="备注" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="adduser" label="创建人" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="addtime" label="创建时间" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="updatuser" label="更新人" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="updatetime" label="更新时间" header-align="center" align="center">
							</el-table-column>
						</el-table>
						<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
							:total="total" layout="total, sizes, prev, pager, next, jumper"
							@size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
						</el-pagination>
						<!-- 弹窗, 新增 / 修改 -->
						<inventoryAddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate"
							@refresh-data-list="getDataList"></inventoryAddOrUpdate>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
    import DataList from "@/utils/DataList";
    import {
        ref,
        reactive,
        onMounted,
        nextTick
    } from 'vue';
    import inventoryAddOrUpdate from "@/components/lswms/stock/InventoryAddOrUpdate";
    import { getCodeListByCode } from "@/network/lswms/base/Codelist.js";
    import {
        getSkucategoryById,
        getSkucategoryByType
    } from "@/network/lswms/base/Skucategory"
    //import {hasPermission} from "@/utils/hasPermission"
    export default {
        name: "inventory",

        components: {
            inventoryAddOrUpdate,
        },

        setup() {
            const {
                dataForm,
                mixinViewModuleOptions,
                getDataList,
                dataList,
                total,
                page,
                limit,
                dataListLoading,
                dataListSelectionChangeHandle,
                dataListSortChangeHandle,
                pageSizeChangeHandle,
                pageCurrentChangeHandle,
                addOrUpdateHandle,
                deleteHandle,
                exportHandle,
                addOrUpdateVisible,
                dataListSelections,
                addOrUpdate
            } = DataList();

            onMounted(() => {
                mixinViewModuleOptions.value.getDataListIsPage = true;
                mixinViewModuleOptions.value.getDataListURL = '/lswms/inventory/page';
                mixinViewModuleOptions.value.deleteURL = '/lswms/inventory';
                mixinViewModuleOptions.value.exportURL = '/lswms/inventory/export';
                mixinViewModuleOptions.value.deleteIsBatchKey = 'id';
                mixinViewModuleOptions.value.deleteIsBatch = true
                if (mixinViewModuleOptions.value.activatedIsNeed) {
                    getDataList();
                }
                boxsFn()
                getSkucategoryList()
            })

            const boxs = ref("");

            const boxsFn = () => {

                getCodeListByCode('BOXLIST').then((res) => {
                    if (res.code !== 0) {
                        return ElMessage.error(res.msg);
                    }
                    boxs.value = res.data;
                }).catch((err) => {});
            }

            const sortvalue = ref([]);
            const handleChange = (sortvalue) =>{
                dataForm.value.sort = "";
                if(!sortvalue){
                    return ;
                }
                for (let i = 0; i < sortvalue.length; i++) {
                    dataForm.value.sort += sortvalue[i] + '#';
                }
                console.log(dataForm.value.sort );
            }

            const skucategoryList = ref([]);
            const getSkucategoryList = () => {
                return getSkucategoryByType(0)
                    .then(function(res) {
                        if (res.code !== 0) {
                            return ElMessage.error(res.msg);
                        }
                        // skucategoryList.value = res.data;

                        let data1 = [];
                        createList(res.data, data1);
                        skucategoryList.value = data1;
                    })
                    .catch(function() {});
            }
            const createList = (sourcedata, targetdata) => {
                for (let i = 0; i < sourcedata.length; i++) {
                    let tempdata = sourcedata[i];
                    if (tempdata.children.length > 0) {
                        let children = {
                            categorykey: '',
                            name: '',
                            children: []
                        }
                        children.categorykey = tempdata.categorykey;
                        children.name = tempdata.name;
                        createList(tempdata.children, children.children);
                        targetdata.push(children)
                    } else {
                        let children = {
                            categorykey: '',
                            name: ''
                        }
                        children.categorykey = tempdata.categorykey;
                        children.name = tempdata.name;
                        targetdata.push(children)
                    }
                }

            }

            return {
                dataForm,
                mixinViewModuleOptions,
                getDataList,
                dataList,
                total,
                page,
                limit,
                dataListLoading,
                dataListSelectionChangeHandle,
                dataListSortChangeHandle,
                pageSizeChangeHandle,
                pageCurrentChangeHandle,
                addOrUpdateHandle,
                deleteHandle,
                exportHandle,
                addOrUpdateVisible,
                dataListSelections,
                addOrUpdate,
                boxs,
                skucategoryList,
                sortvalue,
                handleChange
            }
        },
        // methods:{
        // 	hasPermission
        // }
    }
</script>

<style scoped  lang="scss" >

</style>
